<template>
  <div class="wrap" @click="onPress">
    <div :class="this.status ? 'button-on' : 'button-off'">
      <svg
        t="1659588909173"
        class="icon"
        viewBox="0 0 1024 1024"
        width="40"
        height="40"
      >
        <path
          d="M618.112 353.766a25.6 25.6 0 1 1 29.184-42.06A255.82 255.82 0 0 1 768 529.05c0 141.388-114.611 256-256 256s-256-114.612-256-256a255.795 255.795 0 0 1 120.422-217.165l0.052 0.102a25.6 25.6 0 0 1 25.932 44.032 204.8 204.8 0 1 0 215.655-2.176l0.051-0.077zM512.128 239.027a25.6 25.6 0 0 1 25.6 25.6v170.675a25.6 25.6 0 0 1-51.2 0V264.627a25.6 25.6 0 0 1 25.6-25.6z"
          :fill="
            this.status ? 'rgba(28, 140, 228, 1)' : 'rgba(74, 90, 120, 0.4)'
          "
          p-id="22909"
        ></path>
      </svg>
    </div>
    <span class="button-title">{{ this.text }}</span>
  </div>
</template>
<script>
export default {
  name: 'Button-Panel',
  props: {
    status: Number,
    text: String,
    dataType: Object
  },
  methods: {
    onPress() {
      const { identifier } = this.dataType
      this.$parent.setProps(identifier, this.status ? 0 : 1)
    }
  }
}
</script>
<style>
.wrap {
  display: flex;
  flex-direction: column;
}
.button-on {
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-off {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-title {
  font-size: 14px;
  color: #fff;
  padding-top: 5px;
}
</style>
